<template>
	<view>
		<uni-popup ref="sendCodeRef" :maskBackgroundColor="'rgba(0, 0, 0, 0.6)'" catchtouchmove="true"
			@maskClick="reset">
			<view class="code-form-main">
				<scroll-view scroll-y style="height: 500rpx">
					<view class="tag-box">
						<view @click="selectItem(v, idx)" v-for="(v, idx) in setList" :key="idx"
							:class="v.checked ? 'tag-ac' : 'tag'">
							{{ v.label }}
							<uni-tooltip>
								<view slot="content" class="labelStyle">
									{{ v.subtitle }}
								</view>
								<uni-icons @click="detailLog(v, idx)" type="help" size="24" color="#999"></uni-icons>
							</uni-tooltip>

						</view>
					</view>
					<view class="form-box" v-if="form.visibleType == 3">
						<view class="form-item"
							v-for="(v, idx) in isShowAll ? form.specifyAccessUsers : form.specifyAccessUsers.slice(0, 2)"
							:key="idx">
							<uni-easyinput maxlength="11" type="number" @blur="changePhone(v, idx)"
								v-model="form.specifyAccessUsers[idx]" placeholder="请输入手机号" />
						</view>

					</view>
					<view v-if="form.visibleType == 3" class="zk" @click="isShowAll = !isShowAll">
						{{ isShowAll ? '收起所有' : '展开所有' }}
						<uni-icons color="#999" :visibleType="!isShowAll ? 'down' : 'up'" size="20"></uni-icons>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<view class="close" @click="reset()">取消</view>
					<button class="btn-st" @click="submit()">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { updateReportDetailVisible, getSpecifyAccessUserList } from '@/api/water.js'
export default {
	data() {
		return {
			form: {
				visibleType: 0,
				specifyAccessUsers: ['', '', '', '', '', '', '', '', '', '']
			},
			setList: [{
				label: '全公开',
				value: 0,
				checked: false,
				subtitle: '所有访问者登录后即可查看全部报告内容'
			},
			{
				label: '部分公开',
				value: 1,
				checked: false,
				subtitle: '访问者登录后以下内容将会被隐藏：企业名称、法人姓名、手机号、信用代码等基本信息'
			},
			{
				label: '私密',
				value: 2,
				checked: false,
				subtitle: '仅自己可见'
			},
			{
				label: '指定访问',
				value: 3,
				checked: false,
				subtitle: '直接添加用户开启查看权限'
			}
			],
			isShowAll: false,
			isSuccess: true,
			detailInfo: {},
		}
	},

	methods: {
		getPhoneList(shareCode) {
			getSpecifyAccessUserList({
				shareCode: shareCode
			}).then((res) => {
				let phoneLength = 10 - res.data.length
				let arr = []
				for (let i = 0; i < phoneLength; i++) {
					arr.push('')
				}
				this.form = {
					specifyAccessUsers: [...res.data.map(v => v.phone), ...arr],
					visibleType: this.detailInfo.visibleType
				}
				this.setList[this.form.visibleType].checked = true
			});
		},
		submit() {
			if (this.form.visibleType != 3) {
				delete this.form.specifyAccessUsers;
			}
			let params = {
				id: this.detailInfo.id,
				taskId: this.detailInfo.taskId,
				shareCode: this.detailInfo.shareCode,
				...this.form,
			}

			if (params.visibleType == 3) {
				params.specifyAccessUsers.forEach((v, idx) => {
					if (!v) {
						delete params.specifyAccessUsers[idx]
					}
				})
				params.specifyAccessUsers = params.specifyAccessUsers.filter(v => v)
				const uniqueSet = new Set(params.specifyAccessUsers);
				if (uniqueSet.size !== params.specifyAccessUsers.length) {
					return this.$util.Tips('存在重复手机号，请检查');
				}
			}
			updateReportDetailVisible(params).then(res => {
				this.$util.Tips('报告内容查看权限已更改！')
				this.$refs.sendCodeRef.close()
				return this.$emit('getDetail')
			})

			let paramsPageClick = {
				Um_Key_ButtonName: '确定提交',
				Um_Key_SourcePage: `报告详情-权限设置弹框`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		changePhone(v, idx) {
			if (v) {
				let reg = /^1[3-9][0-9]\d{8}$/;
				if (!reg.test(v)) {
					this.$util.Tips('请输入正确的手机号')
				}
			}

			// console.log(v, idx);
		},
		detailLog(v, idx) {
			console.log(v, idx);
		},
		openAuth(val) {
			this.detailInfo = val
			this.getPhoneList(val.shareCode)
			this.$refs.sendCodeRef.open('bottom')
		},
		reset() {
			this.form.visibleType = this.detailInfo.visibleType
			this.setList.forEach(item => {
				item.checked = false
			})
			this.$refs.sendCodeRef.close()
			let paramsPageClick = {
				Um_Key_ButtonName: '取消',
				Um_Key_SourcePage: `报告详情-权限设置弹框`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		selectItem(v, idx) {
			this.form.visibleType = v.value
			this.setList.forEach((item, index) => {
				if (index === idx) {
					item.checked = true
				} else {
					item.checked = false
				}
			})


			let paramsPageClick = {
				Um_Key_ButtonName: this.setList[idx].label,
				Um_Key_SourcePage: `报告详情-权限设置弹框`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
	},
}
</script>

<style lang="scss" scoped>
.labelStyle {
	max-height: 80rpx;
	min-width: 500rpx;
}

/deep/ .uni-tooltip-popup {
	/* #ifdef H5 */
	transform: translateX(-20%) !important;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	transform: translateX(-60%) !important;
	/* #endif */
	left: 0% !important;
}

.code-form-main {
	text-align: left;
	// padding: 15px;
	background-color: #fff;
	// border-radius: 25rpx;
	overflow: hidden;
	width: 750rpx;
	margin: 0 auto;
	position: relative;
	z-index: 999;
	color: #000;
	font-size: 28rpx;

	.tag-box {
		padding: 30rpx;

		.tag {
			background-color: #f6f9f8;
			height: 90rpx;
			padding: 20rpx 40rpx;
			font-size: 30rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			display: flex;
			// justify-content: center;
			align-items: center;
			color: #666;
		}

		.tag-ac {
			height: 90rpx;
			padding: 20rpx 40rpx;
			font-size: 30rpx;
			color: #007aff;
			margin-bottom: 20rpx;
			background-color: #eef5ff;
			margin-right: 20rpx;
			font-weight: 500;
			position: relative; // 添加相对定位以便于绝对定位的伪元素
			display: flex;
			// justify-content: center;
			align-items: center;

			&:after {
				content: '✓'; // 使用 Unicode 对号字符
				font-size: 20rpx; // 可根据需要调整大小
				color: #fff; // 对号颜色
				position: absolute;
				right: 10rpx; // 控制对号距离右边的距离
				top: 5rpx; // 控制对号距离顶部的距离
				z-index: 1; // 确保对号在最上层
			}

			&:before {
				content: '';
				position: absolute;
				right: 0; // 紧靠右边
				top: 0; // 紧靠顶部
				width: 40rpx; // 半圆的宽度（可根据需要调整）
				height: 40rpx; // 半圆的高度（可根据需要调整）
				background-color: #007aff; // 半圆背景颜色
				border-bottom-left-radius: 40rpx; // 创建朝左下方的四分之一圆角
				z-index: 0; // 在对号下层
			}
		}
	}

	.form-box {
		// width: 93%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 30rpx;

		.form-item {
			width: 48%;
			margin-bottom: 30rpx;
		}


	}

	.zk {
		text-align: center;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;

		>view {
			text-align: center;
			border-radius: 10rpx;
			font-weight: 500;
			font-size: 34rpx;
		}

		.close {
			color: #007aff;
			border: 1px solid #007aff;
			width: 305rpx;
			height: 98rpx;
			line-height: 98rpx;
			border-radius: 30rpx;
		}

		.btn-st {
			width: 305rpx;
			height: 98rpx;
			background: #488AFD;
			line-height: 98rpx;
			border-radius: 30rpx;
			background-color: #007aff;
			color: #fff;
		}
	}

}
</style>